<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定</title>
    <script src="../js//vue.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!-- 动态绑定样式
        class
        字符串写法 适用于，要绑定的样式类名不确定，需要动态指定
        数组写法  适用于，要绑定的样式个数不确定，名字也不确定
        对象写法  适用于，要绑定的样式个数确定，名字也确定，但是要动态绑定要不要
        
        style
        对象写法
        <div :style='styleObj'></div>
        data(){
            return {
                styleObj:{
                    fontSize: 40+'px';
                    color: 'red';
                },
                styleObj2:{
                    backgroundColor: 'green';
                },
            }
        }
        数组写法
        <div :style='[styleObj,styleObj2]'></div>
    -->
    <div id="app">
        <div class="basic" :class="list" >
            动态样式绑定
        </div>
        <div class="basic" :class="Mood" >
            动态样式绑定
        </div>
        <div>
            <h3>改变心情</h3>
            <button @click="changeMood('happy')">happy</button>
            <button @click="changeMood('sad')">sad</button>   
            <button @click="changeMood('normal')">normal</button>
        </div>
        <div>
            <h3>基本改变</h3>
            <button @click="addBasic('atguidu1')">背景颜色</button>
            <button @click="addBasic('atguigu2')">字体</button>
            <button @click="addBasic('atguigu3')">圆角</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            data:{
               Mood:'',
               list:[],
            },
            methods: {
                changeMood(val){
                    this.Mood = val
                },
                addBasic(val){
                    let index = this.list.indexOf(val)
                    if(index==-1){
                        this.list.push(val)
                    }else{
                        this.list.splice(index,1)
                    }
                }
            },
        }).$mount('#app')
    </script>
</body>
</html>